<template>
  <Category :disable="showState === 1" />

  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <SpuList v-if="showState === 0" @setState="setState" />
    <SpuForm v-if="showState === 1" :spuInfo="spuInfo" @setState="setState" />
    <SkuForm v-if="showState === 2" :spuInfo="spuInfo" @setState="setState" />
  </el-card>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import type { SpuInfoType } from "@/api/spu";

export default defineComponent({
  name: "Spu",
});
</script>

<script setup lang="ts">
import { ref } from "vue";
import SpuForm from "./components/SpuForm/index.vue";
import SkuForm from "./components/SkuForm/index.vue";
import SpuList from "./components/SpuList/index.vue";
import { storeToRefs } from "pinia";
import useAttrStore from "@/stores/attr";

const attrStore = useAttrStore()
const { category3Id } = storeToRefs(attrStore)

const showState = ref(0)

// 初始化保存完整的spuInfo数据, 如果是新增则直接传给SpuForm组件,如果是编辑则修改值再传
const spuInfo = ref<SpuInfoType>({
  category3Id: category3Id.value,
  description: '',
  spuName: '',
  tmId: null,
  spuImageList: [],
  spuSaleAttrList: [],
})

// 接收子传过来的值跳转页面
const setState = (state: number, row?: SpuInfoType) => {
  showState.value = state
  // 先判断有没有row,有再传值
  if (row) {
    // 把编辑传递的Spu数据保存给初始值
    spuInfo.value = row
  } else {
    // 没有row说明用户点击的是新增,需要把之前的spuInfo再次初始化
    spuInfo.value = {
      category3Id: category3Id.value,
      description: '',
      spuName: '',
      tmId: null,
      spuImageList: [],
      spuSaleAttrList: [],
    }
  }
}
</script>